<template>
  <HeaderNav />
  <article>
    <!-- 网站主体 -->
    <div id="main">
      <!-- 定义右侧窗口信息 -->
      <section class="aside">
        <aside class="users">
          <img src="./images/unknown.png" />
          <div>
            <p><a href="javascript:void(0);">点击登录</a></p>
            <p><a href="javascript:void(0);">登录账号可享受大众会员特权</a></p>
          </div>
          <p onclick="$('.vip-cvs').show()">
            <span class="lf"></span>开通VIP尊享特权<span class="rf"></span>
          </p>
          <div class="clearfix">
            <p class="download svip">下载权益</p>
            <p class="book svip">图书权益</p>
            <p class="vip svip">VIP文章</p>
            <p class="col svip">收藏特权</p>
          </div>
        </aside>

        <!-- vip充值窗口 2022/8/14新增 -->
        <div class="vip-cvs">
          <div class="vip-cz-win">
            <p class="title">爱下载资源分享平台-开通VIP</p>
            <div class="v1">
              <h1>月会员</h1>
              <p class="money">10</p>
              <p class="ls">有效期30天</p>
              <p class="ls">免费资源下载</p>
              <p class="ls">赠送200积分</p>
              <a class="btn">立即开通</a>
            </div>
            <div class="v2">
              <h1>年会员</h1>
              <p class="money">80</p>
              <p class="ls">有效期365天</p>
              <p class="ls">免费资源下载</p>
              <p class="ls">赠送2000积分</p>
              <a class="btn">立即开通</a>
            </div>
            <div class="v3">
              <h1>永久会员</h1>
              <p class="money">300</p>
              <p class="ls">永久有效</p>
              <p class="ls">免费资源下载</p>
              <p class="ls">赠送10000积分</p>
              <a class="btn">立即开通</a>
            </div>
          </div>
        </div>

        <!-- 评论资源 -->
        <aside class="res-com">
          <h1 class="res-title">资源评论</h1>
          <textarea class="area" placeholder="下载资源后方可评论"></textarea>
          <div class="star">
            <span class="act">★</span>
            <span>★</span>
            <span>★</span>
            <span>★</span>
            <span>★</span>
          </div>
          <div class="btn"><button type="button">提交评论</button></div>
        </aside>
      </section>
      <section>
        <!-- 定义详细目录-->
        <div id="detail">
          <!-- 资源上传者信息 -->
          <div class="res-author">
            <img src="./images/user.jpg"/>
            <span>─╀0vЁ灬残夜</span><br/>
            <div class="gz">
              <a href="javascript:void(0)" id="attach">关注</a>
              <a href="./message.html" id="letter">私信</a>
            </div>
            <a href="./more.html">查看TA的更多资源</a>
          </div>

          <!-- collect 样式 会显示 收藏印章(如果该资源没有被收藏，不显示) -->
          <div class="res-detail collect">

            <!-- 资源信息 -->
            <div class="title">
              <h1>Spring cloud,Spring boot 项目实例，两个<a href="javascript:void(0)"></a></h1>
              <b class="time">2017-06-19</b>
              <b class="filesize">12.6MB</b>
              <span class="kws">
						<em>spring</em>
						<em>cloud</em>
						<em>spring boot</em>
					</span>
            </div>

            <div class="desc"> <!-- 信息描述-->
              spring cloud 项目基于Spring Cloud的云分布式后台管理系统架构，
              核心技术采用Eureka、Fegin、Ribbon、Zuul、
              Hystrix、Security、OAth、Mybatis、Ace-cache等主要框架和中间件，
              UI采用Bootstrap、jquery等前端组件spring boot项目是使用spring boot + thymeleaf
              开发个人博客项目.本人参照好长时间，完美运行
            </div>
            <div class="msg"> <!-- 评价信息-->
              <span class="act">★</span>
              <span class="act">★</span>
              <span class="act">★</span>
              <span class="act">★</span>
              <span>★</span>
            </div>
            <div class="oper"> <!-- 下载操作-->
              <span>所需积分：<b>2</b></span>
              <span>下载次数：<b>100</b></span>
              <br />
              <span>
						<a class="btn">取消收藏</a>
						<a class="btn downx">普通下载</a>
						<a class="btn thunder">迅雷下载</a>
					</span>
            </div>
          </div>

        </div>
        <div id="comment">
          <div class="title">
            评论：<span>共有<b>2</b>条</span>
          </div>

          <!--每一条评论 -->
          <div class="cons">
            <div class="img">
              <img src="./images/coms.jpg" />
              <span class="star">
					    <span class="act">★</span>
						<span class="act">★</span>
						<span class="act">★</span>
						<span>★</span>
						<span>★</span>
					</span>
            </div>
            <div class="cmt">
              <span>张三</span>|<span>2016-05-17 15:32:12</span>
              <p class="msg">
						<span>
							这本书真心不错，值得下载~！
						</span>
              </p>
            </div>
          </div>

          <div class="cons">
            <div class="img">
              <img src="./images/coms.jpg" />
              <span class="star">
					    <span class="act">★</span>
						<span class="act">★</span>
						<span class="act">★</span>
						<span class="act">★</span>
						<span>★</span>
					</span>
            </div>
            <div class="cmt">
              <span>张三</span>|<span>2011-05-17 15:32:12</span>
              <p class="msg">
						<span>
							Google Plus用透明到白色的渐变遮罩，渐变遮罩在文字超出的时候才显示，但无法挤出文字，且背景只能纯色，不理想。
							豌豆荚则更简单粗暴换行显示，换行显示则文字未超出时依然显示 ...xxx，更不理想！当字数多到一定程度就显示省略号点点点。
							最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。
						</span>
              </p>
            </div>
          </div>

          <!-- 分页 -->
          <div class="pagination">
            <a class="left"></a>
            <a class="act">1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
            <a>5</a>
            <a class="right"></a>
            <select>
              <option>1/5</option>
              <option>2/5</option>
              <option>3/5</option>
              <option>4/5</option>
              <option>5/5</option>
            </select>
          </div>

        </div>

      </section>
    </div>
  </article>
  <Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
export default {
  components: {
    HeaderNav,
    Footer ,
  }
}
</script>

<style scoped>

</style>